<template>
    <div class="warrper">
        <!-- 购物车 -->
<div id="shopping-cart" class="page-shopping-cart">
    <h4 class="cart-title">购物清单</h4>
    <!-- 标题 -->
    <div class="cart-product-title clearfix">
        <div class="td-check fl">
            <!-- 当切换到check-true类名时就调用全选函数 -->
            <span class="check-span fl check-all" :class="{'check-true':isSelectAll}"
              @click="selectProduct(isSelectAll)"></span>  <!-- 选择框 -->
            全选
        </div>
        <div class="td-product fl">商品</div>
        <div class="td-num fl">数量</div>
        <div class="td-price fl">单价(元)</div>
        <div class="td-total fl">金额(元)</div>
        <div class="td-do fl">操作</div>
    </div>

    <!-- 内容 -->
    <div class="cart-product clearfix">
      <table>
        <tbody>
          <tr v-for='(item,index) in productList' :key="index">
            <td class="td-check">
              <span class="check-span" @click='item.select=!item.select' :class="{'check-true':item.select}"></span>
            </td>
            <td class="td-product">
                <img :src="item.pro_img" width="98" height="98" alt="">
                <div class="product-info">
                  <h6>{{item.pro_name}}</h6>
                  <p>品牌：{{item.pro_brand}}&nbsp;&nbsp;{{item.pro_place}}</p>
                  <p>规格/纯度:{{item.pro_purity}}&nbsp;&nbsp;起定量：{{item.pro_min}}</p>
                  <p>配送仓储：{{item.pro_depot}}</p>
                </div>
                <div class="clearfix"></div>
            </td>
            <td class="td-num">
                <div class="product-num">
                  <a href="javascript:;" class="num-reduce num-do fl" @click='item.pro_num--'><span></span></a>
                  <input type="text" class="num-input" v-model='item.pro_num'>
                  <a href="javascript:;" class="num-add num-do fr" @click='item.pro_num++'><span></span></a>
                </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span>.00</p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="price-text">{{item.pro_price*item.pro_num}}</span>.00</p>
            </td>
            <td class="td-do">
              <a href="javascript:;" class="product-delete" @click='deleteOneProduct(index)'>删除</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

    <!-- 最后一行统计 -->
    <div class="cart-product-info">
        <a href="javascript:;" class="delete-product" @click='deleteProduct'><span></span>删除所选商品</a>
        <a href="#" class="keep-shopping"><span></span>继续购物</a>
        <a href="javascript:;" class="fr btn-buy">去结算</a>
        <a href="javascript:;" class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></a>
        <a href="javascript:;" class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品总计（不含运费）:</a>
    </div>

    <div class="cart-worder clearfix">
       <a href="javascript:;" class="choose-worder fl"><span></span>绑定跟单员</a>
       <div class="worker-info fl">
       </div>
   </div>
</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
          productList:[
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':3,
          'pro_img':'http://thirdwx.qlogo.cn/mmopen/MKSUPLNLibJtwJPubIAfJCkBvuST31h8Iic26PVerticmrDAicQiauZgadDM1pgTdH1owjxn0HwdfbGGPohfLqTLQic8nXg8TaqJWS/132',
          'pro_price': 800
        },
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':1,
          'pro_img':'http://thirdwx.qlogo.cn/mmopen/MKSUPLNLibJtwJPubIAfJCkBvuST31h8Iic26PVerticmrDAicQiauZgadDM1pgTdH1owjxn0HwdfbGGPohfLqTLQic8nXg8TaqJWS/132',
          'pro_price': 700
        },
        {
          'pro_name':'【斯文】甘油|丙三醇',
          'pro_brand':'skc',
          'pro_place':'韩国',
          'pro_purity':'99.7%',
          'pro_min':'215千克',
          'pro_depot':'上海沧海仓储',
          'pro_num':1,
          'pro_img':'http://thirdwx.qlogo.cn/mmopen/MKSUPLNLibJtwJPubIAfJCkBvuST31h8Iic26PVerticmrDAicQiauZgadDM1pgTdH1owjxn0HwdfbGGPohfLqTLQic8nXg8TaqJWS/132',
          'pro_price': 600
        }
      ]
        }
    },
    computed:{
      // 检测是否全选
      isSelectAll:function(){
          //如果productList中每一条数据的select都为true,就返回true,否则返回false
        return this.productList.every(function(val){return  val.select})
      },

    // 获取总价和产品总数
      getTotal:function(){
        // 获取list中select为true的数据
        var _proList = this.productList.filter(function(val){return val.select}),
        totalPrice = 0;
        for (var i = 0; i < _proList.length; i++) {
          // 总价累加
          totalPrice += _proList[i].pro_num * _proList[i].pro_price;
        }
        // 选择产品的件数就是_proList.lenth，总价就是totalPrice
        return{totalNum:_proList.length,totalPrice:totalPrice}
      }

    },
    methods:{
      // 全选与取消全选
      selectProduct:function(_isSelect){
        //遍历productList,全部取反
        for (var i = 0; i < this.productList.length; i++) {
          this.productList[i].select = !_isSelect
        }
      },

      //删除选中的产品
      deleteProduct:function(){
        this.productList =this.productList.filter(function(item){return !item.select})
      },

      //删除单条产品
      deleteOneProduct:function(index){
        //根据索引删除productList的记录
        this.productList.splice(index,1);
      },
    },
    mounted(){
       //为productList添加select（是否选中字段，初始值为true）
      var _this=this;
      this.productList.map(function(item){    //map:'键值对'
        _this.$set(item,'select',true)      //往item添加select属性，默认为true
      })
    }
}
</script>
<style lang = "stylus" scoped >
.warrper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
  margin: 0;
  padding: 0;
}
.clearfix{
  zoom: 1;
}
.clearfix:after {
  clear: both;
}
.clearfix:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
a{
  text-decoration: none;
  color: #333;
}
img{vertical-align: middle;}
.page-shopping-cart{
  width: 100%;
  margin:1rem auto;
  font-size: .28rem;
  border:1px solid #e3e3e3;
  border-top:2px solid #317ee7;
}
.page-shopping-cart .cart-title{
  color:#317ee7;
  font-size: .32rem;
  text-align: left;
  padding-left: .4rem;
  line-height: 1.36rem;
}
.page-shopping-cart .red-text {
  color: #e94826;
}
.page-shopping-cart .check-span{
  display: block;
  width: .48rem;
  height: .4rem;
  margin-top: .18rem;
  background: url("../../assets/cartBg.png") no-repeat 0 0;
}

/* 点击时改变勾选 */
.page-shopping-cart .check-span.check-true{
  background: url('../../assets/cartBg.png') no-repeat 0 -22px;
}
.page-shopping-cart .td-check{
  width:15%;
}
.page-shopping-cart .td-product{
  width:25%;
}
.page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total{
  width:15%;
}
.page-shopping-cart .td-do{
  width:15%;
}
.cart-product-title{
  text-align: center;
  height: .76rem;
  line-height: .76rem;
  padding: 0 .4rem;
  background-color: #f7f7f7;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
.cart-product-title .td-product{
  text-align: center;
  font-size: .24rem;
}
.cart-product-title .td-check{
  text-align: left;
}
.cart-product-title .td-check .check-span .check-span{
  margin:.18rem .12rem 0 0;
}

/* 内容开始 */
.cart-product{
  padding: 0 .4rem;
  text-align: center;
}
.cart-product table{
  width: 100%;
  text-align: center;
  font-size: .24rem;
}
.cart-product table td{
  padding: .4rem 0;
}
.cart-product table tr{
  border-bottom:1px dashed #e3e3e3;
}
.cart-product table tr:last-child{
  border-bottom:none;
}
.cart-product table .product-num{
  border: 1px solid #e3e3e3;
  display: inline-block;
  text-align: center;
}
.cart-product table .product-num .num-do{
  width: .24rem;
  height: .56rem;
  background: #f7f7f7;
  display: block;
}
.cart-product table .product-num .num-reduce span{
  display: block;
  width: .12rem;
  height: 2px;
  margin:.26rem auto 0 auto;
  background: url("../../assets/cartBg.png") no-repeat;
}
.cart-product table .product-num .num-add span{
  display: block;
  width: .16rem;
  height: .16rem;
  margin:.2rem auto 0 auto;
  background: url("../../assets/cartBg.png") no-repeat;
}
.cart-product table .product-num .num-input{
  width: .42rem;
  height: .56rem;
  line-height:.56rem;
  border:none;
  text-align: center;
}
.cart-product table .td-product{
  text-align: center;
  font-size: .24rem;
  line-height: .4rem;
}
.cart-product table .td-product img{
  border:1px solid #e3e3e3;
  margin-right: .2rem;
}
.cart-product table .td-product .product-info{
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}
.cart-product table .td-do{
  font-size: .24rem;
}

/* 最后一行统计 */

.cart-product-info{
  height:1rem;
  line-height: 1rem;
  background: #f7f7f7;
  padding-left: .4rem;
}
.cart-product-info .delete-product{
  color:#666;
}
.cart-product-info .delete-product span{
  display: inline-block;
  vertical-align: top;
  margin:18px 8px 0 0;
  width:13px;
  height: .3rem;
  background: url("../../assets/delete.png") no-repeat;
  background-size 100%  100%;
}
.cart-product-info .product-total{
  font-size: .28rem;
  color:#e94826;
}
.cart-product-info .product-total span{
  font-size: .4rem;
}
.cart-product-info .check-num{
  color:#333;
}
.cart-product-info .check-num span{
  color: #e94826;
}
.cart-product-info .keep-shopping{
  color: #666;
  margin-left: .8rem;
}
.cart-product-info .keep-shopping span{
  display: inline-block;
  vertical-align: top;
  margin:18px 8px 0 0;
  width: .3rem;
  height: .3rem;
  background: url("../../assets/cartBg.png") no-repeat;
  background-size 100%  100%;
}
.cart-product-info .btn-buy{
  height: 1rem;
  color: #fff;
  font-size: .4rem;
  display: block;
  width: 2.2rem;
  background: #ff7700;
  text-align: center;
  margin-left: .6rem;
}



/* cart-worder */

.page-shopping-cart .cart-worder {
    padding: .4rem; }
.page-shopping-cart .cart-worder .choose-worder {
    color: #fff;
    display: block;
    background: #39e;
    width: 2.8rem;
    height: .8rem;
    line-height: .8rem;
    border-radius: 4px;
    text-align: center;
    margin-right: .4rem; }
.page-shopping-cart .cart-worder .choose-worder span {
    display: inline-block;
    vertical-align: top;
    margin: 9px .2rem 0 0;
    width: 22px;
    height: 22px;
    background: url("../../assets/cartBg.png") no-repeat -92px 0; 
    }
.page-shopping-cart .cart-worder .worker-info {
    color: #666; }
.page-shopping-cart .cart-worder .worker-info img {
    border-radius: 100%;
    margin-right: .2rem; }
.page-shopping-cart .cart-worder .worker-info span {
    color: #000; }

.choose-worker-box {
    width: 12.4rem;
    background: #fff; }
.choose-worker-box .box-title {
    height: .8rem;
    line-height: .8rem;
    background: #F7F7F7;
    text-align: center;
    position: relative;
    font-size: .28rem; }
.choose-worker-box .box-title a {
    display: block;
    position: absolute;
    top: .3rem;
    right: .32rem;
    width: .2rem;
    height: .2rem;
    /* background: url("../../assets/shopping_cart.png") no-repeat -80px 0;  */
    }
.choose-worker-box .box-title a:hover {
    /* background: url("../../assets/shopping_cart.png") no-repeat -80px -22px;  */
    }
.choose-worker-box .worker-list {
    padding-top: .6rem;
    height: 2.68rem;
    overflow-y: auto; }
.choose-worker-box .worker-list li {
    float: left;
    width: 25%;
    text-align: center;
    margin-bottom: .6rem; }
.choose-worker-box .worker-list li p {
    margin-top: 8px; }
.choose-worker-box .worker-list li.cur a {
    color: #f70; }
.choose-worker-box .worker-list li.cur a img {
    border: 1px solid #f70; }
.choose-worker-box .worker-list li a:hover {
    color: #f70; }
.choose-worker-box .worker-list li a:hover img {
    border: 1px solid #f70; }
.choose-worker-box .worker-list li img {
    border: 1px solid #fff;
    border-radius: 100%; }
</style>


